<template>
  <div class="app-container data-transmission-config">
    
    <div style="margin-bottom: 24px; text-align: right;">
        <el-button type="primary" @click="handleSave">保存配置</el-button>
      </div>
    <el-row :gutter="20">
      <!-- 断线回补设置 -->
      <el-col :span="10">
        <el-card shadow="hover">
          <div slot="header" class="card-header">断线回补设置</div>
          <el-form label-width="110px" :model="replenishForm">
            <el-form-item label="启用断线回补功能">
              <el-switch v-model="replenishForm.enableReplenish" />
            </el-form-item>
            <el-form-item label="回补模式选择">
              <el-radio-group v-model="replenishForm.replenishMode">
                <el-radio label="auto">自动</el-radio>
                <el-radio label="manual">手动</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="启用乱序回补">
              <el-switch v-model="replenishForm.enableDisorder" />
            </el-form-item>
            <el-form-item label="数据保留时间">
              <el-input v-model.number="replenishForm.dataRetention" type="number" min="1" style="width: 120px;" suffix="小时" />
              <span style="margin-left: 8px;">小时</span>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :disabled="!replenishForm.enableReplenish" @click="handleReplenish">开始回补</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <!-- 传输加密设置 -->
      <el-col :span="14">
        <el-card shadow="hover">
          <div slot="header" class="card-header">传输加密设置</div>
          <el-form label-width="110px" :model="encryptForm">
            <el-form-item label="启用TLS/SSL加密">
              <el-switch v-model="encryptForm.enableTLS" />
            </el-form-item>
            <el-form-item label="加密等级">
              <el-select v-model="encryptForm.encryptLevel" placeholder="请选择">
                <el-option label="高" value="high" />
                <el-option label="中" value="medium" />
                <el-option label="低" value="low" />
              </el-select>
            </el-form-item>
            <el-form-item label="证书文件上传">
              <el-upload
                class="upload-container"
                drag
                action="#"
                :show-file-list="true"
                :auto-upload="false"
                :on-change="handleCertChange"
                :file-list="encryptForm.certFiles"
                accept=".pem,.crt,.key"
              >
                <i class="el-icon-upload" style="font-size:32px;color:#409EFF" />
                <div class="el-upload__text">拖拽文件至此处或点击上传<br>支持 .pem、.crt、.key 格式</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="指令通道配置">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-input v-model.number="encryptForm.cmdTimeout" type="number" min="1" style="width: 100%;" placeholder="响应超时时间" suffix="秒" />
                </el-col>
                <el-col :span="12">
                  <el-select v-model="encryptForm.cmdFormat" placeholder="指令格式">
                    <el-option label="JSON" value="json" />
                    <el-option label="XML" value="xml" />
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <!-- 回补日志 -->
    <el-card style="margin-top: 24px;">
      <div slot="header" class="card-header">回补日志</div>
      <el-row type="flex" align="middle" justify="space-between" style="margin-bottom: 10px;">
        <el-col :span="8">
          <el-input v-model="logSearch" placeholder="搜索日志..." clearable @input="filterLogs" style="width: 220px;" />
        </el-col>
        <el-col :span="4" style="text-align:right;">
          <span>共 {{ filteredLogs.length }} 条记录</span>
        </el-col>
      </el-row>
      <el-table :data="pagedLogs" border style="width: 100%;">
        <el-table-column prop="time" label="时间" min-width="180" align="center" />
        <el-table-column prop="type" label="操作类型" min-width="120" align="center" />
        <el-table-column prop="size" label="数据量" min-width="120" align="center" />
        <el-table-column prop="status" label="状态" min-width="120" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '成功' ? 'success' : 'danger'">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="操作人" min-width="120" align="center" />
      </el-table>
      <div style="margin-top: 10px; text-align: right;">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="filteredLogs.length"
          :page-size="pageSize"
          :current-page.sync="currentPage"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'DataTransmissionConfig',
  data() {
    return {
      replenishForm: {
        enableReplenish: true,
        replenishMode: 'auto',
        enableDisorder: true,
        dataRetention: 72
      },
      encryptForm: {
        enableTLS: true,
        encryptLevel: 'high',
        certFiles: [],
        cmdTimeout: 30,
        cmdFormat: 'json'
      },
      logSearch: '',
      logs: [
        { time: '2024-01-20 14:30:25', type: '自动回补', size: '1.2 MB', status: '成功', operator: '系统' },
        { time: '2024-01-20 13:15:10', type: '手动回补', size: '0.8 MB', status: '失败', operator: '管理员' },
        { time: '2024-01-20 11:45:30', type: '自动回补', size: '2.5 MB', status: '成功', operator: '系统' }
      ],
      filteredLogs: [],
      currentPage: 1,
      pageSize: 5
    }
  },
  computed: {
    pagedLogs() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.filteredLogs.slice(start, start + this.pageSize)
    }
  },
  created() {
    this.filteredLogs = this.logs
  },
  methods: {
    handleReplenish() {
      this.$message.success('回补任务已启动！')
    },
    handleCertChange(file, fileList) {
      this.encryptForm.certFiles = fileList
    },
    filterLogs() {
      const keyword = this.logSearch.trim()
      if (!keyword) {
        this.filteredLogs = this.logs
      } else {
        this.filteredLogs = this.logs.filter(log =>
          Object.values(log).some(val => String(val).includes(keyword))
        )
      }
      this.currentPage = 1
    },
    handlePageChange(page) {
      this.currentPage = page
    },
    handleSave() {
      this.$message.success('配置已保存！')
    }
  }
}
</script>

<style lang="scss" scoped>
.data-transmission-config {
  .card-header {
    font-weight: bold;
    font-size: 16px;
  }
  .el-card {
    margin-bottom: 20px;
  }
  .el-form-item {
    margin-bottom: 18px;
  }
  .upload-container {
    width: 100%;
    .el-upload-dragger {
      width: 100%;
      height: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
